<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">changeMessage</button>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";

const message = ref("Hello, world!");

const changeMessage = async () => {
  message.value = "Hello, nextTick!";
  // nextTick(() => {
  //   console.log(document.querySelector("p")!.textContent); // 'Hello, nextTick!'
  // });
  await nextTick();
  console.log(document.querySelector("p")!.textContent); // 'Hello, nextTick!'
};
</script>

<style scoped></style>
